<template> 
    <div class="box">
        <div class="head_img animated fadeInDown">
            <img src="./../../static/img/logo1.png" alt="">
        </div>
        <div id="Login_box" class="animated fadeInDown delay-1s">
            <div class="input-group mb-3">
                <input type="text" class="form-control" placeholder="请输入账号" aria-label="username" v-model="userName" aria-describedby="basic-addon1">
            </div>
            <div class="input-group mb-3">
                <input type="password" class="form-control" placeholder="请输入密码" aria-label="passward" v-model="password" aria-describedby="basic-addon1">
                
            </div>
            <router-link to='' style="float:right;color:#007bff">忘记密码</router-link>
            <!-- <a href="" style="float:right">忘记密码</a> -->
            <div class="Login_btn">
                <button type="button" class="btn btn-primary" @click="login">登陆</button>
                <button type="button" class="btn btn-light" @click="registe">注册</button>
            </div>
        </div>
    </div>
        
</template>
<script>
import axios from 'axios'
export default {
    data(){
        return {
            msg:'',////消息提示专用
            userName:'',
            password:''
        }
    },
    methods:{
        open() {
            this.$message({message:this.msg});
        },
        login(){
            let day=30
            let exp=new Date();
            exp.setDate(exp.getDate() + day);
            axios.post('http://localhost:3000/login',{
                userName:this.userName,
                password:this.password
            }).then(res=>{
                const response=res.data;
                console.log(response)
                if(response.status==1){
                    var d= new Date();
                    d.setHours(d.getHours() + (24 * 30)); //保存一个月
                    document.cookie="userName="+this.userName+";expires="+d.toGMTString();
                    document.cookie="password="+this.password+";expires="+d.toGMTString();
                    document.cookie="userId="+response.result.userId+";expires="+d.toGMTString();
                    this.msg=response.msg;
                    this.open()
                    this.$router.push('/')
                }else{
                    this.msg=response.msg;
                    this.open()
                }
            })
        },
        registe(){
            this.$router.push('/registe')
        }
    }
}
</script>

<style>
html{
    width: 100%;
    height: 100%;
}
body{
    width: 100%;
    height: 100%;
}
.box{
    width: 100%;
    height: 100%;
    background: url('./../../static/img/index_banner.jpg');
    background-size: cover;
    background-repeat: no-repeat;

}
.head_img{
    width: 100%;
}
.head_img>img{
    width: 100%;
}
    #Login_box{
        width: 80%;
        padding: 1em;
        position: absolute;
        top: 30%;
        left: 50%;
        margin-left: -40%;
        background: rgba(255, 255, 255, .5);
        border-radius: 5px;
    }
    .header{
        width: 100%;
        background: #fff;
    }
    .navbar-brand{
        display: flex;
        align-items: center;
        color: #397ee4 !important;
    }
    .navbar-brand>p{
        margin-left: 1em;
        margin-bottom: 0;
    }
    .Login_btn{
        width: 100%;
    }
    .Login_btn>button{
        width: 100%;
        border-radius: 1.25em;
        margin-top: 1em;
    }
</style>
